<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="robots" content="all">
		<title>上传图片，可调图片宽高</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
    	<link rel="stylesheet" type="text/css" href="ycbootstrap_1.css"/>
		<link rel="stylesheet" type="text/css" href="reset_1.css"/>
		<script src="jquery-1.10.2_1.js"></script>
		<script src="iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
		<script src="hammer.js" type="text/javascript" charset="utf-8"></script>
		<script src="lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.photoclip.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#view {
				width:0.6rem;
				height:0.6rem;
				 background: url('file.jpg') no-repeat left top;
			}
			#view img{
					width:0.6rem;
					height:0.6rem;
				    position: absolute;
				    left: 0;
				    top: 0;
			}

			.cover-wrap {
				display:none;
				position:fixed;
				left:0;
				top:0;
				width:100%;
				height:100%;
				background: rgba(0, 0, 0, 0.4);
				z-index: 10000000;
				text-align:center;

			}
			#clipArea {
				margin:0.1rem;
				height: 5.2rem;

			}
			.btn {
				height:0.56rem;
				line-height:0.36rem;
				text-align: center;
				padding-top:0.08rem;
			}
			#clipBtn {
				width:1.2rem;
				height: 0.36rem;
				border-radius: 4px;
				background-color:#ff8a00;
				color: #FFFFFF;
				font-size: 14px;
				text-align: center;
				line-height: 36px;
				outline: none;
			}
			
			#file {
				opacity:0;
				filter:alpha(opacity=0);
				width:2.14rem;
				height:1.6rem;
				position:absolute;
				top:0;
				left:0;"
			}
		</style>
		
	</head>
	<body>
				        		
				   <!--  裁切遮罩 -->
			<div class="cover-wrap">	

					<!-- 裁切框 -->
					<div id="clipArea"></div>

					<!-- 点击保存图片 -->
					<div class="btn">
						<button id="clipBtn">保存封面</button>
					</div>

			</div>

			<!-- 图片展示 -->
			<div id="view" style="background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: contain;">
				<input type="file" id="file" accept="image/*">
			</div>

			<!-- 点击上传封面图 -->
			






		<script src="rem.js"></script>
	    <script type="text/javascript">
	    
	    //上传封面
	    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		var clipArea = new bjj.PhotoClip("#clipArea", {
			size: [260,260],// 截取框的宽和高组成的数组。默认值为[260,260]
			outputSize: [260,260], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
			//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
			file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
			view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
			ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
			loadStart: function() {
				// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
				$('.cover-wrap').fadeIn();
				console.log("照片读取中");
			},
			loadComplete: function() {
				 // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
				console.log("照片读取完成");
			},
			//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
			clipFinish: function(dataURL) {
				 // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
				$('.cover-wrap').fadeOut();
				$('#view').css('background-size','100% 100%');
				console.log(dataURL);
			}
		});
		//clipArea.destroy();
	    </script>
	</body>
</html>
